import React, { useMemo } from "react";
import { FilteredProductsBlockProps } from "./type";
import ProductBlockCeil from "../../UI_KIT/Cells/ProductBlock.ceil";

const FilteredProductsBlock: React.FC<FilteredProductsBlockProps> = (props) => {
  const { filteredProducts, isLoading } = props;

  const renderFilterProducts = useMemo(
    () => filteredProducts,
    [filteredProducts]
  );

  return (
    <>
      {renderFilterProducts?.map((product) => (
        <ProductBlockCeil
          isLoading={isLoading}
          key={product.product_id}
          id={product.product_id}
          title={product.title}
          brand={product.brand}
          price={product.price}
          img_paths={product.img_paths[0]}
          colors={product.colors}
        />
      ))}
    </>
  );
};

export default React.memo(FilteredProductsBlock);
